<script setup>
import {ref} from "vue";
import {post} from "@/request/request";

const keyword = ref("");
const searchInfo = ref({})
const leftClick = () => {
  uni.navigateBack();
};
const search = () => {
  post('productSearch', {product_name: keyword.value}).then(res => {
    const {data} = res;
    console.log('search', data)
    searchInfo.value = data
  })
}
const goodsClick = (item) => {
  uni.navigateTo({url: '/pages/goods/goods?id=' + item.id})
}

//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};
</script>
<template>
  <uv-navbar
      :fixed="true"
      title="ئىزدەش"
      :placeholder="true"
      @leftClick="leftClick">
    <template v-slot:left>
      <view class="uv-nav-slot" @click="open">
        <image src="/static/search/arrow-left.svg"/>
      </view>
    </template>
  </uv-navbar>
  <view class="search">
    <view class="search-box">
      <uv-search placeholder="ئىزدىمەكچى بولغان مەزمۇننى كىرگۈزۈڭ" height="96rpx" shape="round" :clearabled="false"
                 :showAction="false" v-model="keyword" @search="search" inputAlign="center"></uv-search>
    </view>
    <view class="title">ئىزدەش نەتىجىسى</view>
    <view class="list-box">
      <template v-if="searchInfo.length > 0">
        <template v-for="(item, index) in searchInfo" :key="index">
          <view class="list-item" @click="goodsClick(item)">
            <image :src="item.product_image"/>
            <view class="list-content">
              <view class="content-top">{{ item.product_name }}</view>
              <view class="content-bot">{{ item.product_introduction }}</view>
            </view>
            <view class="money-box">
              <view style="font-size: 28rpx; color: #ff8473">{{ item.product_price }}</view>
              <view style="font-size: 18rpx; color: #888888; text-decoration: line-through;">
                {{ item.product_amount }}
              </view>
            </view>
          </view>
        </template>
      </template>
      <template v-else>
        <image src="/static/404.svg"/>
        <view style="width: 100%;text-align: center">ئىزدەش نەتىجىسى يوق</view>
      </template>
    </view>
  </view>
</template>

<style scoped lang="scss">
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;

  image {
    width: 22rpx;
    height: 28rpx;
  }
}

.search {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  direction: rtl;
  padding: 20rpx;

  .search-box {
    margin: 20rpx;
    width: 345px;
    height: 96rpx;
    filter: drop-shadow(0 0 5rpx rgba(0, 0, 0, 0.2));
  }

  .title {
    margin: 80rpx;
    width: 100%;
    font-size: 32rpx;
    font-weight: 400;
  }

  .list-box {
    width: 690rpx;

    .list-item {
      margin: 25rpx;
      width: 100%;
      height: 188rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      image {
        width: 184rpx;
        height: 184rpx;
      }

      .list-content {
        width: 294rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;

        .content-top {
          width: 100%;
          font-size: 25rpx;
          font-weight: 550;
          color: #111111;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .content-bot {
          width: 100%;
          font-size: 18rpx;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .money-box {
        width: 100rpx;
        height: 56rpx;
      }
    }
  }
}
</style>
